<template>
	<view class="content">
		<view class="t-bg" style="background-image:url('/static/luck/DZP_BJ.png')">
			<image class="t-wan" src="/static/luck/wenan.png"></image>
			<image class="t-wan-lp" src="/static/luck/hengfu.png"></image>
			<view class="t-choujiang t-flex-row" style="background-image:url('/static/luck/BJ.png')">
				<view :animation="rotate" class="t-zp" style="background-image:url('/static/luck/jiangpin.png')"></view>
				<image @click="start" class="t-start" src="/static/luck/start.png"></image>
			</view>
		</view>
		<!-- 规则部分 -->
		<view class="t-bottom">
			<view class="t-luck-wrapper">
				<view class="t-jh t-flex-row" style="background-image:url('/static/luck/anniu.png')">
					您还有{{luckDrawTimes}}次机会
				</view>
				<view class="t-rule">
					<text>1. 您直推支付成功的订单均可获得机会</text>
					<text>2. 摇中的现金红包在提现中会展示，可直接提现到账</text>
				</view>
			</view>
		</view>
		<!-- 抽奖结束弹窗 -->
		<kevy-mask :show="isShowAwd" @click="toConfirmAwd">
			<view class="t-full t-flex-row">
				<view class="t-tk-modal">
					<view class="t-tk-bg t-bg-full" style="background-image:url('/static/luck/tankuang.png')">
						<view v-if="drawIdx!=null && drawIdx == 0" class="t-xxcy t-flex-col-s">
							<image src="/static/luck/xiexiecanyu.png"></image>
							<view class="t-xxcy-ts t-flex-row">再努力努力肯定就会中哦~</view>
						</view>
						<view v-if="drawIdx!=null && drawIdx > 0" class="t-flex-col-s">
							<image class="t-tk-zj-tip" src="/static/luck/wenzi.png"></image>
							<view class="t-tk-zj-desc t-flex-col">
								<image class="t-zj-jp" :src="'/static/luck/1.png'"></image>
								<view class="t-zj-jp-desc">红包
								<span style="font-size: 20px;">
									{{zeroTwo(ydhh)}}
								</span>
								元，已添加到您的提现列表</view>
							</view>
						</view>
					</view>
					<view @click="toConfirmAwd" class="t-tk-btn t-bg-full"
						style="background-image:url('/static/luck/xiaoanniu.png')">确定
					</view>
				</view>
			</view>
		</kevy-mask>
	</view>
</template>

<script>
	import {
		redPacketCount,
		usrp
	} from '@/api/my'
	var animation = uni.createAnimation({
		duration: 4000,
		timingFunction: 'ease-out'
	});
	import kevyMask from '@/components/kevy-mask/kevy-mask.vue'

	export default {
		components: {
			kevyMask
		},
		data() {
			return {
				rotate: 0, //度数-抽奖动画
				turning: false, //转盘是否正在转
				luckDrawTimes: 0, //抽奖机会，5代表可以抽5次
				isShowAwd: false, //是否显示奖品弹框，抽奖后提示，要么中奖奖品，要么谢谢参与
				drawIdx: null, //抽到的奖品下标，用于指定中奖奖品并旋转转盘到对应奖品处。例如共5个奖品，下标3代表第4个奖品，下标从0开始
				ydhh: null
			}
		},
		onLoad() {
			redPacketCount().then(res => {
				if (res.code == 200 && res.data != null) {
					this.luckDrawTimes = res.data
				}
			})
		},
		methods: {
	
			/**
			 * 抽奖按钮点击
			 */
			start() {
				let $ = this;
				let luckDrawTimes = $.luckDrawTimes;
				if (luckDrawTimes < 1) {
					uni.showToast({
						title: "无抽奖机会，快去推广获取！",
						icon: 'none'
					})
					return
				}
				if (!$.turning) {
					$.turning = true;
					$.$nextTick(() => {
						usrp().then(res => {
							console.log('---yhbres----', res)
							let awardIdx = res.dramIdx
							$.ydhh = res.ydhb
							//计算旋转角度
							let rdm = $.computeRotateAward(awardIdx, 1);
							animation.rotate(rdm).step();
							$.rotate = animation.export();
							$.luckDrawTimes = $.luckDrawTimes <= 0 ? 0 : $.luckDrawTimes - 1;
							setTimeout(() => {
								let animation1 = uni.createAnimation({
									duration: 100,
									timingFunction: 'linear'
								});
								animation1.rotate(0).step();
								$.drawIdx = awardIdx;
								$.isShowAwd = true;
								$.$nextTick(() => {
									setTimeout(() => {
										$.rotate = animation1.export();
										$.turning = false;
									}, 1000);
								});
							}, 4350);
						})
					});
				}
			},
			/**
			 * 根据后台返回中奖奖品索引计算旋转角度
			 * @param {*} idx 中奖奖品下标，从0开始
			 * @param {*} type 1-计算角度 2-计算奖品
			 */
			computeRotateAward(idx, type) {
				let award;
				if (idx == 5) {
					award = type == 1 ? 60 : "现金红包";
				} else if (idx == 4) {
					award = type == 1 ? 300 : "现金红包";
				} else if (idx == 3) {
					award = type == 1 ? 120 : "现金红包";
				} else if (idx == 2) {
					award = type == 1 ? 240 : "现金红包";
				} else if (idx == 1) {
					award = type == 1 ? 180 : "现金红包";
				} else {
					award = type == 1 ? 0 : "谢谢参与";
				}
				//这里3代表3圈，你可以设置为你想要的
				return type == 1 ? (3 * 360 + award) : award;
			},

			/**
			 * 确认奖品按钮点击事件
			 */
			toConfirmAwd() {
				//这里中奖信息关闭弹框
				this.isShowAwd = false;
			}
		}
	}
</script>

<style scoped>
	.content {
		width: 100%;
		box-sizing: border-box;
	}

	.t-bg {
		width: 100%;
		box-sizing: border-box;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: relative;
		overflow-x: hidden;
		height: 1200rpx;
		padding-top: 345rpx;
		/* margin-top: 40rpx; */
	}

	.t-wan {
		position: absolute;
		width: 100%;
		height: 283rpx;
		top: 12rpx;
		left: 0;
		z-index: 1;
	}

	.t-wan-lp {
		position: absolute;
		width: 370rpx;
		height: 130rpx;
		top: 223rpx;
		z-index: 0;
		left: calc(50% - 185rpx);
	}

	.t-choujiang {
		width: 630rpx;
		height: 630rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin: 0rpx auto;
		position: relative;
	}

	.t-zp {
		width: 577rpx;
		height: 577rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.t-start {
		width: 146rpx;
		height: 171rpx;
		position: absolute;
		z-index: 1;
	}

	.t-jh {
		width: 456rpx;
		height: 120rpx;
		margin: 0 auto;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		font-size: 40rpx;
		color: #980100;
	}

	.t-bottom {
		position: relative;
		width: 100%;
		height: 280px;
		box-sizing: border-box;
		opacity: 0.99;
		background: #FDC469;
	}

	.t-luck-wrapper {
		position: relative;
		box-sizing: border-box;
		top: -219rpx;
	}

	.t-rule {
		margin: 10rpx auto 0rpx;
		width: 585rpx;
	}

	.t-rule text {
		font-size: 28rpx;
		color: #980100;
		text-align: justify;
		display: block;
	}

	.t-tk-modal {
		width: 632rpx;
		height: 588rpx;
		position: relative;
		box-sizing: border-box;
	}

	.t-tk-bg {
		width: 100%;
		height: 528rpx;
		background-size: 100% 100%;
	}

	.t-tk-btn {
		width: 336rpx;
		height: 120rpx;
		position: absolute;
		bottom: 0rpx;
		left: calc(50% - 168rpx);
		font-size: 40rpx;
		color: #980100;
		line-height: 120rpx;
		text-align: center;
		background-size: 100% 100%;
	}

	.t-flex-row {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.t-flex-row-s {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}



	.t-flex-col {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}





	.t-flex-col-s {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}

	.t-xxcy image {
		width: 400rpx;
		height: 148rpx;
		margin-top: 139rpx;
	}

	.t-xxcy-ts {
		width: 510rpx;
		height: 100rpx;
		background: #FEF2CD;
		border-radius: 20rpx;
		font-size: 30rpx;
		color: #D93637;
		margin-top: 43rpx;
	}



	.t-tk-zj-tip {
		width: 347rpx;
		height: 106rpx;
		margin-top: 44rpx;
	}

	.t-tk-zj-desc {
		width: 474rpx;
		height: 281rpx;
		background: #FEF2CD;
		border-radius: 20rpx;
		margin-top: 2rpx;
	}

	.t-zj-jp {
		width: 155rpx;
		height: 170rpx;
	}

	.t-zj-jp-desc {
		font-size: 24rpx;
		color: #D93637;
		text-align: justify;
		width: 420rpx;
	}
</style>